<template>
  <div class="home-container">
    <van-swipe class="swipe-banner" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in swipeImages" :key="item.id">
        <img :src="item.url" alt="banner" />
      </van-swipe-item>
    </van-swipe>

    <van-grid :column-num="4" :border="false">
      <van-grid-item
        v-for="item in features"
        :key="item.text"
        :icon="item.icon"
        :text="item.text"
      />
    </van-grid>
    <div class="recommend-section">
      <h3 class="section-title">热门推荐</h3>
      <van-card
        v-for="item in recommends"
        :key="item.id"
        :price="item.price"
        :desc="item.desc"
        :title="item.title"
        :thumb="item.thumb"
      >
        <template #tags>
          <van-tag plain type="danger">{{ item.tag }}</van-tag>
        </template>
      </van-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface SwipeImage {
  id: number
  url: string
}

interface FeatureItem {
  icon: string
  text: string
}

interface RecommendItem {
  id: number
  title: string
  price: number
  desc: string
  thumb: string
  tag: string
}

const swipeImages = ref<SwipeImage[]>([
  {
    id: 1,
    url: 'https://static.erp.91spyc.com/default/kOhiNDqL8HYSONem19sTu5f39A9edR3qfdQ45SvN.jpg'
  },
  {
    id: 2,
    url: 'https://static.erp.91spyc.com/default/FmKHf1dLaVnsiN5DhtxcGV0kBgzlbY9N6tgU3ZBH.jpg'
  },
  {
    id: 3,
    url: 'https://static.erp.91spyc.com/default/fWBD5UW9aotL7pKW8cmYqyZuiWlXOfAfv4DpADzz.jpg'
  }
])

const features = ref<FeatureItem[]>([
  { icon: 'coupon-o', text: '限时抢购' },
  { icon: 'gift-o', text: '新品上市' },
  { icon: 'gold-coin-o', text: '积分商城' },
  { icon: 'fire-o', text: '热门推荐' }
])

const recommends = ref<RecommendItem[]>([
  {
    id: 1,
    title: '冰离子纯色翻领',
    price: 59.9,
    desc: '热门推荐商品',
    thumb: 'https://static.erp.91spyc.com/spider/n559fH1VF7DwywZaBKwkwy7qDf3iyPuIanKNDg64.jpg',
    tag: '热卖'
  },
  {
    id: 2,
    title: '富士棉鎏金间色翻领短袖',
    price: 79.9,
    desc: '热门推荐商品',
    thumb: 'https://static.erp.91spyc.com/spider/ITsuyh1e8SQKAETkl8SODX03YjPVern6ExPZeRCQ.jpg',
    tag: '畅销'
  },
  {
    id: 3,
    title: '富士棉拼色口袋款',
    price: 99.9,
    desc: '热门推荐商品',
    thumb: 'https://static.erp.91spyc.com/spider/28mNOffDo5iUQfd4AJFF36LPkPv5XNx36fIbSxOb.jpg',
    tag: '秒杀'
  },
  {
    id: 4,
    title: '32支高弹仿棉丝',
    price: 99.9,
    desc: '热门推荐商品',
    thumb: 'https://static.erp.91spyc.com/spider/OAtXHdIYSQYDeOrbULlZXDQhIQT8RqYGNhFiPsTh.jpg',
    tag: '热卖'
  }
])
</script>

<style lang="scss" scoped>
.home-container {
  min-height: calc(100vh - 100px);
  background: #f7f8fa;
  .swipe-banner {
    img {
      width: 100%;
      height: auto;
    }
  }
  .section-title {
    padding: 15px;
    margin: 0;
    font-size: 16px;
    color: #333;
    background: white;
  }

  :deep(.van-card) {
    margin-top: 8px;
    border-radius: 8px;
  }
}
</style>
